<template>
  <div class="car-inspection">
    <el-card class="inspection-card">
      <div slot="header" class="clearfix">
        <span class="card-title">
          <i class="el-icon-search"></i>
          车况检测评估
        </span>
      </div>
      
      <el-form :model="inspectionForm" :rules="inspectionRules" ref="inspectionForm" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <h4 class="section-title">外观检测</h4>
            <el-form-item label="车身外观" prop="bodyCondition">
              <el-rate
                v-model="inspectionForm.bodyCondition"
                :colors="rateColors"
                :texts="['很差', '较差', '一般', '良好', '优秀']"
                show-text
              />
            </el-form-item>
            <el-form-item label="漆面状况" prop="paintCondition">
              <el-rate
                v-model="inspectionForm.paintCondition"
                :colors="rateColors"
                :texts="['很差', '较差', '一般', '良好', '优秀']"
                show-text
              />
            </el-form-item>
            <el-form-item label="轮胎磨损" prop="tireCondition">
              <el-rate
                v-model="inspectionForm.tireCondition"
                :colors="rateColors"
                :texts="['严重', '较重', '一般', '轻微', '新胎']"
                show-text
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <h4 class="section-title">机械检测</h4>
            <el-form-item label="发动机状况" prop="engineCondition">
              <el-rate
                v-model="inspectionForm.engineCondition"
                :colors="rateColors"
                :texts="['很差', '较差', '一般', '良好', '优秀']"
                show-text
              />
            </el-form-item>
            <el-form-item label="变速箱状况" prop="gearboxCondition">
              <el-rate
                v-model="inspectionForm.gearboxCondition"
                :colors="rateColors"
                :texts="['很差', '较差', '一般', '良好', '优秀']"
                show-text
              />
            </el-form-item>
            <el-form-item label="底盘状况" prop="chassisCondition">
              <el-rate
                v-model="inspectionForm.chassisCondition"
                :colors="rateColors"
                :texts="['很差', '较差', '一般', '良好', '优秀']"
                show-text
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <h4 class="section-title">内饰检测</h4>
            <el-form-item label="座椅状况" prop="seatCondition">
              <el-rate
                v-model="inspectionForm.seatCondition"
                :colors="rateColors"
                :texts="['很差', '较差', '一般', '良好', '优秀']"
                show-text
              />
            </el-form-item>
            <el-form-item label="仪表功能" prop="dashboardCondition">
              <el-rate
                v-model="inspectionForm.dashboardCondition"
                :colors="rateColors"
                :texts="['很差', '较差', '一般', '良好', '优秀']"
                show-text
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <h4 class="section-title">电子设备</h4>
            <el-form-item label="空调系统" prop="acCondition">
              <el-rate
                v-model="inspectionForm.acCondition"
                :colors="rateColors"
                :texts="['故障', '较差', '一般', '良好', '优秀']"
                show-text
              />
            </el-form-item>
            <el-form-item label="音响导航" prop="audioCondition">
              <el-rate
                v-model="inspectionForm.audioCondition"
                :colors="rateColors"
                :texts="['故障', '较差', '一般', '良好', '优秀']"
                show-text
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="24">
            <el-form-item label="检测备注">
              <el-input
                v-model="inspectionForm.remarks"
                type="textarea"
                :rows="3"
                placeholder="请描述车辆的详细状况、发现的问题等..."
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="24" style="text-align: center;">
            <el-button type="primary" @click="calculateInspectionScore">
              <i class="el-icon-cpu"></i>
              生成检测报告
            </el-button>
            <el-button @click="resetInspection">重置</el-button>
          </el-col>
        </el-row>
        
        <!-- 检测结果展示 -->
        <div v-if="inspectionResult.score" class="inspection-result">
          <el-divider content-position="center">检测结果</el-divider>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="score-display">
                <div class="score-number">{{ inspectionResult.score }}</div>
                <div class="score-label">综合评分</div>
                <div class="score-grade" :class="inspectionResult.gradeClass">
                  {{ inspectionResult.grade }}
                </div>
              </div>
            </el-col>
            <el-col :span="16">
              <div class="result-details">
                <h4>检测报告</h4>
                <p><strong>车况等级：</strong>{{ inspectionResult.grade }}</p>
                <p><strong>建议售价调整：</strong>{{ inspectionResult.priceAdjustment }}</p>
                <p><strong>主要问题：</strong>{{ inspectionResult.issues }}</p>
                <p><strong>保值建议：</strong>{{ inspectionResult.suggestion }}</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'CarInspection',
  data() {
    return {
      inspectionForm: {
        bodyCondition: 0,
        paintCondition: 0,
        tireCondition: 0,
        engineCondition: 0,
        gearboxCondition: 0,
        chassisCondition: 0,
        seatCondition: 0,
        dashboardCondition: 0,
        acCondition: 0,
        audioCondition: 0,
        remarks: ''
      },
      inspectionRules: {
        bodyCondition: [
          { required: true, message: '请评估车身外观状况', trigger: 'change' }
        ],
        engineCondition: [
          { required: true, message: '请评估发动机状况', trigger: 'change' }
        ]
      },
      rateColors: ['#F56C6C', '#E6A23C', '#F7BA2A', '#67C23A', '#409EFF'],
      inspectionResult: {
        score: 0,
        grade: '',
        gradeClass: '',
        priceAdjustment: '',
        issues: '',
        suggestion: ''
      }
    }
  },
  methods: {
    calculateInspectionScore() {
      // 计算各项评分的平均值
      const scores = [
        this.inspectionForm.bodyCondition,
        this.inspectionForm.paintCondition,
        this.inspectionForm.tireCondition,
        this.inspectionForm.engineCondition,
        this.inspectionForm.gearboxCondition,
        this.inspectionForm.chassisCondition,
        this.inspectionForm.seatCondition,
        this.inspectionForm.dashboardCondition,
        this.inspectionForm.acCondition,
        this.inspectionForm.audioCondition
      ].filter(score => score > 0)
      
      if (scores.length === 0) {
        this.$message.warning('请至少完成一项检测评估')
        return
      }
      
      const averageScore = scores.reduce((sum, score) => sum + score, 0) / scores.length
      const finalScore = Math.round(averageScore * 20) // 转换为100分制
      
      // 根据评分确定等级
      let grade = '', gradeClass = '', priceAdjustment = '', issues = '', suggestion = ''
      
      if (finalScore >= 90) {
        grade = '优秀'
        gradeClass = 'grade-excellent'
        priceAdjustment = '无需调整，可维持预期价格'
        issues = '车况良好，无明显问题'
        suggestion = '车辆保养良好，建议尽快出售以获得最佳价格'
      } else if (finalScore >= 80) {
        grade = '良好'
        gradeClass = 'grade-good'
        priceAdjustment = '建议降价5-10%'
        issues = '整体状况良好，有轻微使用痕迹'
        suggestion = '可通过简单保养提升车况，提高售价'
      } else if (finalScore >= 70) {
        grade = '一般'
        gradeClass = 'grade-fair'
        priceAdjustment = '建议降价10-20%'
        issues = '存在一些使用磨损，需要关注'
        suggestion = '建议进行必要的维修保养后再出售'
      } else if (finalScore >= 60) {
        grade = '较差'
        gradeClass = 'grade-poor'
        priceAdjustment = '建议降价20-30%'
        issues = '存在多项问题，需要维修'
        suggestion = '建议维修主要问题后再考虑出售'
      } else {
        grade = '很差'
        gradeClass = 'grade-bad'
        priceAdjustment = '建议降价30%以上'
        issues = '存在严重问题，急需维修'
        suggestion = '建议大修后再出售，或考虑报废处理'
      }
      
      this.inspectionResult = {
        score: finalScore,
        grade,
        gradeClass,
        priceAdjustment,
        issues,
        suggestion
      }
      
      // 触发事件，将检测结果传递给父组件
      this.$emit('inspection-completed', {
        score: finalScore,
        grade,
        adjustmentFactor: this.getAdjustmentFactor(finalScore),
        details: this.inspectionForm
      })
      
      this.$message.success('检测报告生成完成！')
    },
    
    getAdjustmentFactor(score) {
      // 返回价格调整系数
      if (score >= 90) return 1.0
      if (score >= 80) return 0.95
      if (score >= 70) return 0.85
      if (score >= 60) return 0.75
      return 0.65
    },
    
    resetInspection() {
      this.$refs.inspectionForm.resetFields()
      this.inspectionResult = {
        score: 0,
        grade: '',
        gradeClass: '',
        priceAdjustment: '',
        issues: '',
        suggestion: ''
      }
    }
  }
}
</script>

<style scoped>
.car-inspection {
  margin: 20px 0;
}

.inspection-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.section-title {
  color: #409EFF;
  border-bottom: 2px solid #409EFF;
  padding-bottom: 8px;
  margin-bottom: 20px;
}

.el-rate {
  display: flex;
  align-items: center;
}

.inspection-result {
  margin-top: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.score-display {
  text-align: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.score-number {
  font-size: 48px;
  font-weight: bold;
  color: #409EFF;
  line-height: 1;
}

.score-label {
  font-size: 14px;
  color: #909399;
  margin: 10px 0;
}

.score-grade {
  font-size: 18px;
  font-weight: bold;
  padding: 5px 15px;
  border-radius: 20px;
  display: inline-block;
}

.grade-excellent {
  background: #67C23A;
  color: white;
}

.grade-good {
  background: #409EFF;
  color: white;
}

.grade-fair {
  background: #E6A23C;
  color: white;
}

.grade-poor {
  background: #F56C6C;
  color: white;
}

.grade-bad {
  background: #909399;
  color: white;
}

.result-details {
  padding: 0 20px;
}

.result-details h4 {
  color: #303133;
  margin-bottom: 15px;
  border-left: 4px solid #409EFF;
  padding-left: 10px;
}

.result-details p {
  margin: 10px 0;
  line-height: 1.6;
  color: #606266;
}

::v-deep .el-form-item__label {
  font-weight: 500;
}

::v-deep .el-rate__text {
  color: #606266;
  font-size: 12px;
}
</style>
